<template>
  <view class="vocabulary-container">
    <view class="vocabulary-wrapper">
      <view class="vocabulary-row" v-for="(item, index) in sentence_type" :key="index + item.title">
        <view class="row-title">{{ item.title }}</view>
        <view class="row-desc">
          <image class="desc-icon" src="https://rwstatic.tentons.cn/web/Lesson/images/sentence-icon.png" />
          <view class="desc-sentence">
            <text class="phrase">{{ item.phrase }}</text>
          </view>
        </view>
        <view class="row-desc">
          <image class="desc-icon" src="https://rwstatic.tentons.cn/web/Lesson/images/vocabulary-icon.png" />
          <view class="desc-sentence" v-for="(val, inx) in item.sentence" :key="index + inx + val.sentence">
            <text class="sentence">{{ val.sentence }}</text>
            <text class="translate">{{ val.translate }}</text>
          </view>
        </view>
        <view class="h15"></view>
        <view class="row-tag">{{ index + 1 }}</view>
      </view>
      <view class="vocabulary-line"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

type TSentence_type = {
  title: string;
  phrase: string;
  sentence: {
    sentence: string;
    translate: string;
  }[];
};

const sentence_type = ref<TSentence_type[]>([]);

const handleInit = (data: TSentence_type[]) => {
  sentence_type.value = data;
};

defineExpose({
  handleInit,
});
</script>

<style scoped lang="scss">
@import "./common.scss";
</style>
